import { Button, Form, Input, Radio,ImageUploader } from "antd-mobile";
import React, { useState } from "react";
import { register,upload } from "../API/LoginAPI";
import { useHistory } from "react-router-dom";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import  { ImageUploadItem } from "antd-mobile/es/components/image-uploader";

export default function Reg() {
  let history = useHistory();

  const [visible, setvisible] = useState(false);

  const onFinish = async (values: any) => {
    console.log(values);
    let formData = new FormData();

    formData.append("file", avatar);
    // console.log(formData);
    
    let res = await upload(formData);
    console.log(res);
    
    let img = res.data.fileName;

    values.avatar = img;
    console.log(values);
    
    let res2 = await register(values);
    console.log(res2);
    // eslint-disable-next-line eqeqeq
    if (res2.data.code == 200) {
      history.push("/mine");
    }
  };

  const [fileList, setFileList] = useState<ImageUploadItem[]>([]); //上传的图片的集合

  let [avatar, setAvatar] = useState<any>();

  let mockUpload = (file: File): any => {
    setAvatar(file);
    console.log(file);
    let res = {
      url: URL.createObjectURL(file),
    };
    console.log(res);
    return res;
  };

  return (
    <div>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <>
            <Button block type="submit" color="primary" size="large">
              注册
            </Button>
          </>
        }
      >
        <Form.Item name="avatar" label="头像">
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={mockUpload}
          />
        </Form.Item>
        <Form.Item
          name="userName"
          label="用户名"
          rules={[{ required: true, message: "用户名不能为空" }]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="nickName"
          label="昵称"
          rules={[{ required: true, message: "昵称不能为空" }]}
        >
          <Input placeholder="请输入昵称" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            { required: true, message: "密码不能为空" },
            { type: "string", min: 6 },
            {
              pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,}$/,
              message: "必须大写字母开头，包含数字，大小写字母",
            },
          ]}
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setvisible(true)} />
              ) : (
                <EyeOutline onClick={() => setvisible(false)} />
              )}
            </div>
          }
        >
          <Input
            type={visible ? "text" : "password"}
            placeholder="请输入密码"
          />
        </Form.Item>
        <Form.Item
          name="phonenumber"
          label="电话号码"
          rules={[
            { required: true, message: "电话号码不能为空" },
            {
              pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
              message: "必须以1开头,11位数字",
            },
          ]}
        >
          <Input placeholder="请输入电话号码" />
        </Form.Item>
        <Form.Item name="sex" label="性别">
          <Radio.Group>
            <Radio value="0">男</Radio>
            <Radio value="1">女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            { required: true, message: "邮箱不能为空" },
            { type: "string", min: 6 },
            { type: "email", warningOnly: true },
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item
          name="idCard"
          label="身份证"
          rules={[
            { required: true, message: "身份证号不能为空" },
            {
              pattern:
                /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
              message: "必须18位数字",
            },
          ]}
        >
          <Input placeholder="请输入身份证" />
        </Form.Item>
      </Form>
    </div>
  );
}
